<template>
  <view class="friend">
    <view class="search">
      <view class="input">
        <up-input
          placeholder="请输入内容"
          :customStyle="{
            borderRadius: '20px',
            height: '35px',
            border: '0',
          }"
          prefixIcon="search"
        ></up-input>
      </view>
      <view>
        <up-button
          type="primary"
          size="normal"
          shape="circle"
          color="#1677ff"
          text="搜索好友"
          @click="serachFriend(1)"
        ></up-button>
      </view>
    </view>
    <view class="application">
      <view class="title">
        {{ searchStatus ? "搜索结果" : " 好友申请列表" }}
      </view>
      <view class="results">
        <up-button
          type="primary"
          size="normal"
          shape="circle"
          color="#1677ff"
          text="申请列表"
          @click="serachFriend(2)"
        ></up-button>
      </view>
    </view>
    <view class="friend-list" v-if="searchStatus">
      <view class="friend-item">
        <template v-if="searchList.length">
          <view v-for="(item, index) in searchList" :key="index" class="item-search">
            <up-image
              :show-loading="true"
              shape="circle"
              :src="item.pathUrl"
              width="60px"
              height="60px"
            ></up-image>
            <view class="title-text">
              <view class="title-text-top">
                <view>{{ item.name }}</view>
                <view class="send">发消息</view>
              </view>
              <view class="signature">{{ item.signature }}</view>
            </view>
          </view>
        </template>
        <view class="empty-img" v-else>
          <up-image
            width="100px"
            height="60px"
            class="u-page__item__slot-icon"
            :src="`../../static/assets/img/empty.png`"
          ></up-image>
          <view class="empty-text">暂无内容</view>
        </view>
      </view>
    </view>
    <view class="friend-list" v-else>
      <view class="friend-item">
        <template v-if="applicationList.length">
          <view v-for="(item, index) in applicationList" :key="index" class="item-search">
            <up-image
              :show-loading="true"
              shape="circle"
              :src="item.pathUrl"
              width="60px"
              height="60px"
            ></up-image>
            <view class="title-text">
              <view class="title-text-top">
                <view>{{ item.name }}</view>
                <view class="friend-request">
                  <view class="send">接受</view>
                  <view class="send">拒绝</view>
                </view>
              </view>
              <view class="signature">{{ item.signature }}</view>
            </view>
          </view>
        </template>
        <view class="empty-img" v-else>
          <up-image
            width="100px"
            height="60px"
            class="u-page__item__slot-icon"
            :src="`../../static/assets/img/empty.png`"
          ></up-image>
          <view class="empty-text">暂无好友申请</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
const searchStatus = ref<any>(false);
const searchList = ref<any>([
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
]);
const applicationList = ref<any>([
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
  {
    pathUrl:
      "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
    name: "清风",
    signature:
      "1. “众里寻他千百度，蓦然回首，那人却在灯火阑珊处。”回忆小时候总盼着长大，如今真长大了，才明白简单纯粹的美好。签名就像那阑珊处的光，简短却能照亮内心。",
  },
]);
const serachFriend = (index: any) => {
  if (index == 1) {
    searchStatus.value = true;
  } else {
    searchStatus.value = false;
  }
};
</script>
<style lang="scss" scoped>
.friend {
  padding: 20px 20px 100px 20px;
  height: 100vh;
  .search {
    border-radius: 20px;
    border: 1px solid #e1e3e1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    .input {
      width: 100%;
    }
  }
  .application {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    .results {
      width: 120px;
    }
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
  }
  .friend-list {
    margin-top: 20px;
    overflow: auto;

    .friend-item {
      display: flex;
      flex-direction: column;
      .item-search {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d3e3fd;
        padding: 10px;
        .title-text {
          max-width: calc(100% - 60px);
          padding: 0 10px;
          .title-text-top {
            display: flex;
            justify-content: space-between;
            .send {
              border-radius: 4px;
              border: 1px solid #2865eb;
              padding: 2px 10px;
              color: #2865eb;
            }
            .friend-request {
              display: flex;
              margin: 0 -5px;
              .send {
                margin: 0 5px;
                &:nth-child(2) {
                  color: red;
                  border: 1px solid red;
                }
              }
            }
          }
          .signature {
            font-size: 14px;
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 显示省略号来表示溢出的内容 */
            padding: 5px 0;
          }
        }
      }
    }
  }
  .empty-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
    .empty {
      width: 100px;
      height: 59px;
    }
    .empty-text {
      color: #999999;
      margin-top: 20px;
    }
  }
}
</style>
